<template>
	<u-popup v-model="UpShow" mode="center" :mask-close-able="false" class="Up-popup">
		<view class="UpdatePopup_view">
			<view class="updateContent">
				<view class="UpTitle-Tip">更新内容</view>
				<scroll-view scroll-y="true" style="max-height: 290rpx;height: auto;margin-bottom: 40rpx;">
					<view class="UpTitle-text"><rich-text :nodes="UpContent"></rich-text></view>
				</scroll-view>
				<block v-if="!UpRrogressShow">
					<view class="UpdatePopup_Btn" @tap="ToUpdate">立即更新</view>
					<view v-if="UpData.updateFlag == '0'" class="UpdatePopup_Btn active" @tap="Refuse">残忍拒绝</view>
				</block>
				<block v-else>
					<view class="UpProgress"><view class="UpProgress-acti" :style="{ width: `${UpProgress}%` }"></view></view>
				</block>
			</view>
			<view class="updateBottom" v-if="UpRrogressShow">更新中（已更新{{ UpProgress }}%）</view>
		</view>
	</u-popup>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'UpShow',
	data() {
		return {
			/*更新k*/
			UpShow: false,
			UpRrogressShow: false,
			UpProgress: 0,
			/*进度条的值*/
			UpContent: '',
			/*更新内容*/
			UpData: {}
			/*更新j*/
		};
	},
	mounted() {
		this.getVersionInfo();
	},
	computed: {
		...mapState(['version'])
	},
	methods: {
		getVersionInfo: function() {
			var that = this;
			const res = uni.getSystemInfoSync();
			this.$api.homeApi
				.getVersionInfo({
					osType: res.platform,
					version: that.version
				})
				.then(res => {
					if (Number(that.version) < Number(res.data.version)) {
						that.UpVersion = res.data.version;
						that.UpContent = res.data.updateContent.replace(/\n/g, '<br/>');
						that.UpData = res.data;
						uni.hideTabBar();
						that.UpShow = true;
					}
				});
		},
		ToUpdate: function() {
			/*更新*/
			var that = this;
			if (that.UpData.osType != 'ios') {
				that.UpRrogressShow = true;
				console.log('更新开始');
				var downloadTask = uni.downloadFile({
					url: that.UpData.apkUrl,
					success: sdfd => {
						if (sdfd.statusCode === 200) {
							plus.runtime.install(plus.io.convertLocalFileSystemURL(sdfd.tempFilePath), {}, {}, function(error) {
								uni.showToast({
									title: '安装失败',
									duration: 1500
								});
							});
							uni.showTabBar();
							that.UpShow = false;
						}
					}
				});
				downloadTask.onProgressUpdate(res => {
					console.log('下载进度' + res.progress);
					that.UpProgress = Number(res.progress);
				});
			} else {
				plus.runtime.openURL(that.UpData.downloadLink);
			}
		},
		Refuse: function() {
			/*拒绝*/
			this.UpShow = false;
			uni.showTabBar();
		}
	}
};
</script>

<style lang="scss" scoped>
/*app手机弹窗k*/
.UpdatePopup_view {
	width: 550upx;
	box-sizing: border-box;
	border-radius: 20upx;
	background-image: url('/static/new_images/upBg.png');
	background-size: 100%;
	background-repeat: no-repeat;
	padding-top: 400rpx;
	overflow: hidden;
	.updateContent {
		padding: 0rpx 60rpx 30rpx 60rpx;
		background-color: #fff;

		.UpTitle-Tip {
			font-size: 24rpx;
			color: rgba(51, 51, 51, 1);
			font-weight: bold;
			margin-bottom: 10rpx;
			padding: 0rpx 20rpx;
		}

		.UpTitle-text {
			color: #404040;
			font-size: 24rpx;
			padding: 0rpx 20rpx;
		}

		.UpProgress {
			margin-top: 30rpx;
			width: 100%;
			height: 20rpx;
			border-radius: 20rpx;
			border: 2rpx solid $text-color;
			box-sizing: border-box;
			position: relative;
			&-acti {
				background: $text-color;
				height: 20rpx;
				border-radius: 20rpx;
				position: absolute;
				top: -2rpx;
				left: -2rpx;
			}
		}

		.UpdatePopup_Btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: $text-color;
			margin-bottom: 30rpx;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			border-radius: 14rpx;
		}

		.active {
			background: #fff;
			border: $text-color 2rpx solid;
			color: $text-color;
		}
	}
	.updateBottom {
		background: $text-color;
		color: #fff;
		font-weight: bold;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		border-radius: 0rpx 0rpx 14rpx 14rpx;
	}
}
/*app手机弹窗j*/
</style>
